<template>
  <button class="xm-button" :style="{ fontSize: btFontSize }">{{ btname }}</button>

</template>

<script>
export default {
  name: 'XmButton',
  props: {
    // 接收一个父组件传递过来当值
    // 这个值只能使用不能修改
    btname: String,
    //按钮字体大小
    btFontSize: {
      type: String,
      //默认值
      default: '16px',
    },
  },
}
</script>

<style>
.xm-button {
  height: 40px;
  width: 150px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
  border: none;
  color: #fff;
  background: linear-gradient(to right, #ffc107, #ff9800);
  margin-top: 5px;
}
.xm-button:hover {
  background: linear-gradient(to right, #ff9800, #ffc107);
}
</style>
